This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me(http://www.bloggertipandtrick.net/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see  tag .

3.Copy below code and paste it just before the  tag .

4.Now find below code:

5.Copy below code and paste it just after the  .

<div class="about-article">If you find this article useful, please feel free to link to this page from your website or blog.
<p class="noborder"><label for="aa-url">URL:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="" /></p><p><label for="aa-forum">HTML Link:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;&quot;></a>" /></p><p>
<label for="aa-forum">Forum Link:</label><br />
<input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="[url=]/[/url]" /></p>
Widget by BloggerTipAndTrick
</div>

NOTE : Don't change anything in above code.

6.Save your template and you are done.

Using jQuery,we can do many things very easily than normal JavaScript.So jQuery has became the most popular JavaScript library in use today.I wrote my previous article about popular jQuery featured content sliders,that are used by web designers.In this article I am going to show you a better jQuery Tabs collection you can use for your websites or blogs.When we go to websites,we can see different types of jQuery Tabs.If you add a tab view to your website,it save a lot of space in your web pages.Also it gives a better appearance to your website or blog.

You can visit authors websites for configuration instructions/guides,can view live demos of these jQuery Tabs and also you can download files of these tabs using the URLs given below.I checked all of these links and they are working correctly.But in future if this links doesn't work, please leave a comment.I hope to add more jQuery tabs to this article in the future ,so bookmark this web page for future reference.If there is a jQuery tab you like,but you can not add it to your website or blog yourself,you can contact me,I can do it for you.

1. Simple Tabs w/ CSS & jQuery



Article : http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

Demo : http://www.sohtanaka.com/web-design/examples/tabs/


2. jQuery Tabbed Interface / Tabbed Structure Menu Tutorial



Article : http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

Demo : http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html

Download : http://www.queness.com/resources/archives/jquery-tab-menu.zip


3. jQuery Sliding Tab Menu for Sidebar Tutorial



Article : http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial

Demo : http://www.queness.com/resources/html/scrollto/index.html

Download : http://www.queness.com/resources/archives/jquery-scrollto.zip


4. Create a smooth tabbed menu in jQuery


Article : http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/

Demo : http://yensdesign.com/tutorials/tabs/

Download : http://www.yensdesign.com/tutorials/tabs/tabs.zip


5. Updated JQuery Nested Tab Set with Demo



Article : http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo

Demo : http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo

Download : http://blog.cutterscrossing.com/enclosures/JQueryTabsDemo.zip


6. Sweet AJAX Tabs With jQuery 1.4 & CSS3



Article : http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

Demo : http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html

Download : http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.zip


7. Animated tabbed content with jQuery



Article : http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/

Demo : http://www.gayadesign.com/scripts/tabbed/

Download : http://www.gayadesign.com/scripts/tabbed/tabbedContent.zip


8. Tab Navigation with Smooth Horizontal Sliding Using jQuery



Article : http://www.learningjquery.com/2009/09/tab-navigation-with-smooth-horizontal-sliding-using-jquery

Demo : http://www.learningjquery.com/2009/09/tab-navigation-with-smooth-horizontal-sliding-using-jquery

Download : http://assets.learningjquery.com/zips/tab-nav.zip


9. jQuery idTabs



Article : http://www.sunsean.com/idTabs/

Demo : http://www.sunsean.com/idTabs/

Download : http://www.sunsean.com/idTabs/jquery.idTabs.min.js


10. Flowplayer Tabs



Article : http://flowplayer.org/tools/tabs/index.html

Demo : http://flowplayer.org/tools/demos/tabs/index.html

Download : http://flowplayer.org/tools/img/tabs/tabs.zip
http://flowplayer.org/tools/download/index.html


11. Create a Slide Tabbed Box using jQuery



Article : http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/

Demo : http://www.hieu.co.uk/Examples/SlideTabs/index.html

Download : http://www.hieu.co.uk/Examples/SlideTabs.zip


12. Flipping Content Tabs Using jQuery



Article : http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/

Demo : http://demo.webdeveloperplus.com/flipping-tabs/

Download : http://demo.webdeveloperplus.com/source-code/flipping-tabs.zip


13. Create A Tabbed Interface Using jQuery



Article : http://net.tutsplus.com/javascript-ajax/create-a-tabbed-interface-using-jquery/

Demo : http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html

Download : http://nettuts.s3.amazonaws.com/042_jQueryUITabs/source.zip


14. Create a Slick Tabbed Content Area using CSS & jQuery



Article : http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/

Demo : http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html

Download : http://nettuts.s3.amazonaws.com/001_Tabbed/TabsPSD.zip


15. Dynamic Fun with SimplePie and jQuery



Article : http://net.tutsplus.com/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/

Demo : http://nettuts.s3.amazonaws.com/036_BetterBlogRoll/sourceFiles/index.html

Download : http://nettuts.s3.amazonaws.com/036_BetterBlogRoll/sourceFiles.zip


16. Creating Rotating Tabs using jQuery



Article : http://www.ilovecolors.com.ar/rotating-jquery-tabs/

Demo : http://www.ilovecolors.com.ar/wp-content/uploads/rotating-jquery-tabs/

Download : http://www.ilovecolors.com.ar/wp-content/uploads/2009/12/rotating-jquery-tabs1.zip


17. Ultra simple jQuery tabs



Article : http://justfreetemplates.com/blog/2009/08/31/ultra-simple-jquery-tabs.html

Demo : http://justfreetemplates.com/blog/wp-content/uploads/2009/08/simple-jquery-tabs.html


18. jQuery To Fade Effects tabs



Article : http://www.roseindia.net/ajax/jquery/fadeEffectTabs.shtml

Demo : http://www.roseindia.net/ajax/jquery/fadeEffectTab.html


19. Playing with jQuery Tabs



Article : http://insideria.com/2009/03/playing-with-jquery-tabs.html

Demo : http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm


20. Degradable Tabs With jQuery UI



Article : http://www.ultramegatech.com/blog/2009/09/degradable-tabs-with-jquery-ui/

Demo : http://www.ultramegatech.com/blog/examples/tabs.htm


21. jQuery UI Tabs with Next/Previous



Article : http://css-tricks.com/jquery-ui-tabs-with-nextprevious/

Demo : http://css-tricks.com/examples/TabsNextPrev/

Download : http://css-tricks.com/examples/TabsNextPrev.zip

The navigation menu of a website is very important for that website. It gives more attraction your website or blog.Also it will very useful to navigate through your website very easily without confusing.So every web master should give special attention for the top navigation menu of their websites.

Here I listed below some of best CSS horizontal menu collection with full configuration tutorials for your easy use.You can choose any menu from the list given below and go directly to the article links for the setup instructions.All of these Horizontal Menus working perfectly only using CSS and sometimes images with CSS.(JavaScript is not used by any menu given here)So you don't want to worry about JavaScript disabled browsers.

If there is any menu CSS you like from the list given below,but you can not add it to your website or blog yourself,you can contact me,I can do it for you.


Advanced CSS Menu



Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/
Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip


Bulletproof CSS Sliding Doors



Demo : http://azadcreative.com/files/Bulletproof.zip
Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


Create a Slick Menu using CSS3



Demo : http://insicdesigns.com/demo/css3/exp2/index.html
Article : http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/
Download : No


How to Make a CSS Sprite Powered Menu



Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Article : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


CSS Express Drop-Down Menus



Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Article : http://www.projectseven.com/tutorials/navigation/auto_hide/
Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


CSS3-only horizontal drop line tab menu



Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Article : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


Nicer Navigation with CSS Transitions




Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Download : No


Pure CSS Horizontal Menu



Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Article : http://www.devinrolsen.com/pure-css-horizontal-menu/
Download : No


DropDown CSS Menu



Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Article : http://divitodesign.com/css/how-to-dropdown-css-menu/
Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


Pure CSS Menu With Infinite Sub Menus Tutorial



Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/
Download : No


CSS3 Dropdown Menu



Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
Download : No


Elegant Drop Menu with CSS Only



Demo : http://aext.net/example/elegant-menu-with-css-only/
Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download : http://www.box.net/shared/paoqo8y1lt


CSS dropdown menu without javascripting or hacks



Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
Download : No


Create Vimeo-like top navigation



Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Article : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


ADxMenu



Demo : http://aplus.rs/adxmenu/examples/htb/
Article : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


A Great CSS Horizontal Drop-Down Menu



Demo : http://sperling.com/examples/menuh/
Article : http://sperling.com/examples/menuh/
Download : http://sperling.com/examples/menuh/menuh.css


CSS menus



Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Article : http://www.howtocreate.co.uk/tutorials/testMenu.html
Download : No


Pure CSS Fish Eye Menu



Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
Article : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


A centered menu with gradient and two pointers



Demo : http://www.cssplay.co.uk/menus/two_points.html
Article : http://www.cssplay.co.uk/menus/two_points.html
Download : No


Create an Advanced CSS3 Menu



Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


Solid Block Menu



Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


Sleek Pointer Menu




Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


Sleek Pointer Menu 2



Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


How to Create a CSS Menu Using Image Sprites



Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Article : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


CSS Sprite Navigation Tutorial



Demo : http://www.ehousestudio.com/assets/downloads/sprite/
Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download : http://www.ehousestudio.com/assets/downloads/sprite.zip


CSS Overlapping Tabs Menu



Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


CSS Navigation Menus



Demo : No
Article : http://www.jacorre.com/design/cssnavmenus.htm
Download : No


CSS3 Chunky Menu



Demo : http://zubeta.com/demo-menu.html
Article : http://zubeta.com/css3-menu-demo.html
Download : No


Creating a glassy non div navigation bar



Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Article : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


Centered Tabs with CSS



Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Article : http://24ways.org/2005/centered-tabs-with-css
Download : No


Apple’s Navigation bar using only CSS



Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Download : No


Animated horizontal tabs



Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Article : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


A Horizontal Button Menu - The Easy Way



Demo : http://www.cssplay.co.uk/menus/listnine.html
Article : http://www.cssplay.co.uk/menus/tutorial.html
Download : No